<script setup lang="ts">

import {ArrowRight} from "@element-plus/icons-vue";
import {getArticleList} from "@/api/home/index";
import {ref} from "vue";

let artivle = {
    pageNum: 1,
    pageSize: 10
}
let url = 'http://192.168.5.120:8090'
let artivleArr = ref([])
getArticleList(artivle).then(res => {
    artivleArr.value = res.rows
})

</script>

<template>
    <div>
        <div class="box">
            <div class="tit">
                <div class="previous">
                    <span>精选文章</span>
                </div>
                <div class="titMore">
                    <router-link to="/articleList"><span>更多</span></router-link>
                    <el-icon>
                        <ArrowRight/>
                    </el-icon>
                </div>
            </div>
            <div class="substance" v-for="item in artivleArr" :key="item.id">
                <router-link :to="{path: '/articleDetail', query: {id: item.id}}" style="color: black">
                    <div class="essayList">
                        <div class="imgBox">
                            <img :src="url + item.titlePicture" alt="" class="briefIntroductionImg">
                        </div>
                        <div class="fireAndclock">
                            <p class="titText">{{ item.title }}</p>
                            <div class="textImg">
                                <div class="fire">
                                    <img src="../../assets/images/火苗.png" alt="" class="fireImg">
                                    <span>{{ item.readers }}人已读</span>
                                </div>
                                <div class="clock">
                                    <img src="../../assets/images/时钟.png" alt="" class="clockImg">
                                    <span>{{ item.sendTime }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
.box {
    background-color: #fff;
    border-radius: 3%;
    min-height: 75vw;
}

.tit {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(42, 43, 65, 0.2);
    min-height: 10vw;
    line-height: 10vw;

    .previous {
        position:relative;
        &::before{
            content: '';
            display: block;
            position: absolute;
            width: 3px;
            height: 1.0em;
            background-color: #419CFD;
            top: 30%;
        }
        span {
            margin-left: 6px;
            font-weight: 700;
            font-size: 20px;
        }
    }

    .titMore {
        span:first-child {
            font-weight: 700;
            font-size: 20px;
            color: #419CFD;
        }
    }
}

.substance {
    border-bottom: 1px solid rgba(42, 43, 65, 0.2);
    padding: 4%;

    .essayList {
        display: flex;

        .fireAndclock {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            width: 60%;
        }
    }

    .imgBox {
        width: 40%;
        flex: 0 0 auto; /* 不伸缩，保持原始大小 */

        .briefIntroductionImg {
            width: 100%;
            height: 100%;
            border-radius: 10%;
        }
    }

    .titText {
        margin-left: 4%;
        margin-top: 0;
        width: 60%;
        /* 强制在同一行显示 */
        white-space: nowrap;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 添加省略号 */
        text-overflow: ellipsis;
        font-size: 4.5vw;
    }

    .textImg {
        margin-left: 4%;
        display: flex;
        font-size: 3.2vw;
        color: #A9B4BF;
        white-space: nowrap; /* 防止子元素换行 */

        .fire,
        .clock {
            flex: 0 0 auto; /* 不伸缩，保持原始大小 */
            margin-right: 3%; /* 子元素之间的间距 */
        }

        .fireImg,
        .clockImg {
            margin-right: 2%;
            vertical-align: middle;
        }
    }
}
</style>